<template>
  <div>
    <span>{{ currentValue }}</span>
  </div>
</template>

<script>
export default {
  props: {
    // 初始值
    startValue: {
      type: Number,
      default: 0,
    },
    // 数值
    value: {
      type: Number,
      default: 0,
      required: true,
    },
    // 滚动时间
    duration: {
      type: Number,
      default: 3000,
    },
  },
  data() {
    return {
      currentValue: this.startValue,
    };
  },
  watch: {
    value(v) {
      this.currentValue = 0;
      this.numberIncrement();
    },
  },
  methods: {
    numberIncrement() {
      const range = this.value - this.startValue;
      const increment = Math.ceil(range / 60); // 每秒60帧
      const intervalId = setInterval(() => {
        this.currentValue += increment;
        if (this.currentValue >= this.value) {
          this.currentValue = this.value;
          clearInterval(intervalId);
        }
      }, 16);
    },
  },
};
</script>
